<template>
    <div class="px-4 space-y-4 text-sm text-gray-500">
        <div class="flex" @click="goods.showSku()">
            <div class=" w-14 shrink-0">选择</div>
            <div class="text-gray-800 grow">口味</div>
            <IMingcute:right-fill />
        </div>
        <div class="flex">
            <div class=" w-14 shrink-0">配送</div>
            <div class="text-gray-800 grow">
                <div class=" line-clamp-1">
                    配送到临汾市古县临汾市古县临汾市古县临汾市古县临汾市古县
                </div>
                <div>
                    现在下单，预计5月32日送达
                </div>
            </div>
            <IMingcute:right-fill class="shrink-0" />
        </div>



        <div class="flex " @click="showPopup(paramRef)">
            <div class=" w-14 shrink-0">参数</div>
            <div class="text-gray-800 grow">品牌 ｜ 属性</div>
            <IMingcute:right-fill />
        </div>
        <div class="flex flex-wrap gap-2 p-2 text-xs text-gray-400 rounded-md bg-gray-50" @click="showPopup(guaranteeRef)">
            <div class="flex items-center space-x-1" v-for="(item, index) in services.slice(0,3)">
                <IRi:user-smile-line />
                <div>{{ item.name }}</div>
            </div>
        </div>
        <Popup ref="paramRef">
            <div class="flex flex-col p-4 bg-white rounded-t-lg h-2/3">
                <div class="pb-4 text-base font-bold text-center text-gray-800 shrink-0">参数</div>
                <div class="overflow-y-auto grow">
                    <div class="flex items-center mb-4" v-for="(item, index) in params">
                        <div class="w-16 mr-4 text-gray-500 shrink-0">{{ item.name }}</div>
                        <div>{{ item.description }}</div>
                    </div>
                </div>
                <div @click="closePopup(paramRef)" class="py-2 mt-4 text-center text-white bg-red-500 rounded-lg shrink-0">
                    我知道了</div>
            </div>
        </Popup>
        <Popup ref="guaranteeRef">
            <div class="flex flex-col p-4 bg-white rounded-t-lg h-2/3">
                <div class="pb-4 text-base font-bold text-center text-gray-800 shrink-0">服务</div>
                <div class="overflow-y-auto grow">
                    <div class="mb-8" v-for="(item, index) in services">

                        <div class="flex items-center text-sm text-gray-800">
                            <IRi:user-smile-line class="mr-1 text-red-500" />
                            <div>
                                {{ item.name }}
                            </div>
                        </div>
                        <div class="mt-2 text-xs text-gray-500">
                            {{ item.description }}
                        </div>
                    </div>
                </div>
                <div @click="closePopup(guaranteeRef)"
                    class="py-2 mt-4 text-center text-white bg-red-500 rounded-lg shrink-0">我知道了</div>
            </div>
        </Popup>
    </div>
</template>
    
<script setup lang='ts'>
import { useGoods } from '~/store/modules/goods'
const goods = useGoods();
const guaranteeRef = ref()
const paramRef = ref()
const services = [
    { name: '店铺发货&售后', description: '由专卖店从啥那洗发货并提供售后服务' },
    { name: '配送全球', description: '支持港高台以及海外收获地址下单，由于各地区政策不同，具体请以结算页面非准' },
    { name: '7天无理由退换货(一次性包装破损不支持)', description: '7天无理由退换货(一次性包装破损不支持)' },
    { name: '破损包退换', description: '牵手后 72 小时内发现非用户原因商品破损问题提。供收购服务' },
    { name: '30 天保价', description: '支持30天保价，下单30天内前台价格发生降价可以申请价格保护' },
    { name: '闪电退款', description: '为优质会员提供的快速退款服务' },
    { name: '极速审核', description: '用户以 7 天无理由相关原因提交售后申请时，满足相关条件最快 0 秒审核铜鼓哦的服务' },
    { name: '退换货运费险', description: '送运费险' }
]
const params = [
    {name:'尺寸',description:'15 寸'},
    {name:'屏幕',description:'oled'}
]
const showPopup = (popupRef: any) => {
    popupRef?.open()
}
const closePopup = (popupRef: any) => {
    popupRef?.close()
}

</script>
    
<style></style>